<template>
	<view class="course-container">
		<!-- 添加搜索框 -->
		<view class="search-box">
			<view class="search-input">
				<text class="iconfont icon-xiazai5"></text>
				<input type="text" placeholder="搜索线下课程" />
			</view>
		</view>
		
		<!-- 添加课程分类标签 -->
		<!-- <view class="category-tabs">
			<scroll-view scroll-x class="scroll-view_H" show-scrollbar="false">
				<view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">全部课程</view>
				<view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">禅修课程</view>
				<view class="tab-item" :class="{ active: currentTab === 2 }" @click="switchTab(2)">声疗课程</view>
				<view class="tab-item" :class="{ active: currentTab === 3 }" @click="switchTab(3)">颂钵课程</view>
				<view class="tab-item" :class="{ active: currentTab === 4 }" @click="switchTab(4)">瑜伽课程</view>
			</scroll-view>
		</view> -->
		
		<!-- 添加轮播图 -->
		<!-- <view class="swiper-container">
			<swiper indicator-dots autoplay circular interval="3000" duration="500" 
				indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
				<swiper-item>
					<image src="https://dong-1323115148.cos.ap-guangzhou.myqcloud.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250516162552.png" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="https://dong-1323115148.cos.ap-guangzhou.myqcloud.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250516162552.png" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view> -->
		
		<!-- 课程列表标题 -->
		<view class="section-title">
			线下精品课程
		</view>
		
		<!-- 加载中状态 -->
		<view class="loading-state" v-if="loading">
			<view class="spinner"></view>
			<text>加载课程中...</text>
		</view>
		
		<!-- 空数据状态 -->
		<view class="empty-state" v-if="!loading && offlineCourseList.length === 0">
			<image src="/static/images/empty_course.png" mode="aspectFit"></image>
			<text>暂无课程数据</text>
			<button type="primary" size="mini" @click="retryCourseList">重新加载</button>
		</view>
		
		<!-- 现有的课程列表 -->
		<view class="course-list">
			<view class="course-item" v-for="(item, index) in offlineCourseList" :key="index" @click="goCourseDetail(item)">
				<view class="item-left">
					<image :src="item.image" mode="aspectFill"></image>
					<view class="lesson-tag">线下</view>
				</view>
				<view class="item-right">
					<view class="course-title">{{item.title}}</view>
					<view class="course-stats">
						<view class="popularity">
							<image src="/static/images/fire.png" class="stat-icon"></image>
							<text>{{item.popularity}}万人气</text>
						</view>
						<!-- <view class="location" v-if="item.location">
							<image src="/static/images/location.png" class="stat-icon"></image>
							<text>{{item.location}}</text>
						</view> -->
					</view>
					<view class="course-time" v-if="item.time">{{item.time}}</view>
					<view class="price-box">
						<view class="current-price" v-if="item.discountPrice">
							<text class="symbol">¥</text>
							<text class="price-value">{{item.discountPrice}}</text>
						</view>
						<view class="original-price" v-if="item.originalPrice">¥{{item.originalPrice}}</view>
						<view class="buy-now">立即报名</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 添加加载更多 -->
		<view class="loading-more">
			<text>上拉加载更多</text>
		</view>
	</view>
</template>

<script>
	import { getProductslist } from '@/api/store.js';

	export default {
		data() {
			return {
				currentTab: 0,
				offlineCourseList: [],
				page: 1,
				limit: 10,
				loading: false,
				finished: false
			}
		},
		mounted() {
			this.getCourseList();
		},
		methods: {
			getCourseList() {
				this.loading = true;
				let params = {
					page: this.page,
					limit: this.limit,
					cid: 744,  // 使用线下课程分类ID
					isCourse: true    // 添加课程过滤条件
				};
				
				getProductslist(params).then(res => {
					if (res.data && res.data.list) {
						// 处理课程数据
						const courseList = res.data.list
							.filter(item => item.cateId && item.cateId.includes('744') && item.isShow === true) // 支持多分类筛选
							.map(item => {
								return {
									id: item.id || 0,
									title: item.storeName || '未命名课程',
									image: item.image || '/static/images/default_course.png',
									popularity: ((item.sales || 0) + (item.ficti || 0)) / 10000,
									location: item.location || '待定',
									time: item.courseTime || '待定',
									discountPrice: item.price || 0,
									originalPrice: item.otPrice || 0,
									cateId: item.cateId, // 保持原始分类ID
									totalEpisodes: item.totalEpisodes || 0,
									updatedEpisodes: item.updatedEpisodes || 0
								};
							});
						
						this.offlineCourseList = [...this.offlineCourseList, ...courseList];
						this.page++;
						this.finished = courseList.length < this.limit;
					} else {
						this.finished = true;
					}
					this.loading = false;
				}).catch((err) => {
					console.error('获取课程列表失败', err);
					uni.showToast({
						title: '获取课程列表失败',
						icon: 'none'
					});
					this.loading = false;
					this.finished = true;
				});
			},
			onReachBottom() {
				if (!this.loading && !this.finished) {
					this.getCourseList();
				}
			},
			switchTab(index) {
				this.currentTab = index;
				// 这里可以根据选中的标签筛选课程
				uni.showToast({
					title: '切换到' + ['全部课程', '禅修课程', '声疗课程', '颂钵课程', '瑜伽课程'][index],
					icon: 'none'
				});
			},
			goCourseDetail(item) {
				uni.navigateTo({
					url: `/pages/course/kechengxiangqiang/kechengxiangqiang?id=${item.id}`
				})
			},
			// 添加重试方法
			retryCourseList() {
				this.page = 1;
				this.offlineCourseList = [];
				this.finished = false;
				this.getCourseList();
			}
		},
		watch: {
			'form.courseType': {
				handler(newVal) {
					// 线上课程
					if (newVal === true) {
						this.$refs.form.clearValidate('location');
						// 可选：清空地址
						this.form.location = '';
					}
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss">
	.course-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 30rpx;
	}
	
	.search-box {
		padding: 20rpx 30rpx;
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 100;
		
		.search-input {
			display: flex;
			align-items: center;
			height: 70rpx;
			background-color: #f7f7f7;
			border-radius: 35rpx;
			padding: 0 30rpx;
			
			.iconfont {
				font-size: 28rpx;
				color: #999;
				margin-right: 10rpx;
			}
			
			input {
				flex: 1;
				height: 100%;
				font-size: 28rpx;
				color: #333;
			}
		}
	}
	
	.category-tabs {
		background-color: #fff;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			height: 80rpx;
		}
		
		.tab-item {
			display: inline-block;
			padding: 0 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #666;
			position: relative;
			
			&.active {
				color: $theme-color;
				font-weight: bold;
				
				&::after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background-color: $theme-color;
					border-radius: 2rpx;
				}
			}
		}
	}
	
	.swiper-container {
		padding: 20rpx;
		
		swiper {
			height: 300rpx;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}
	}
	
	.section-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		padding: 30rpx 20rpx 20rpx;
		position: relative;
		display: flex;
		align-items: center;
		
		&::before {
			content: '';
			width: 8rpx;
			height: 32rpx;
			background: $theme-color;
			margin-right: 16rpx;
			border-radius: 4rpx;
		}
	}
	
	.course-list {
		padding: 0 20rpx;
		
		.course-item {
			display: flex;
			background-color: #fff;
			padding: 24rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
			transition: all 0.2s ease;
			
			&:active {
				transform: scale(0.98);
			}
			
			.item-left {
				position: relative;
				width: 220rpx;
				height: 220rpx;
				flex-shrink: 0;
				
				image {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
				
				.lesson-tag {
					position: absolute;
					left: 0;
					top: 0;
					background-color: #ff6b00;
					color: #fff;
					font-size: 20rpx;
					padding: 4rpx 12rpx;
					border-radius: 12rpx 0 12rpx 0;
				}
			}
			
			.item-right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				min-height: 120rpx;
				padding-left: 20rpx;
			}
			
			.course-title {
				font-size: 28rpx;
				line-height: 1.3;
				color: #333;
				margin-bottom: 10rpx;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			
			.course-stats {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 12rpx 0;
				
				.popularity, .location {
					font-size: 22rpx;
					color: #999;
					display: flex;
					align-items: center;
				}
				
				.stat-icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 6rpx;
				}
			}
			
			.course-time {
				font-size: 22rpx;
				color: #666;
				margin: 8rpx 0;
			}
			
			.price-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 8rpx;
				
				.current-price {
					display: flex;
					align-items: baseline;
					color: #f5402d;
					font-weight: bold;
					
					.symbol {
						font-size: 24rpx;
					}
					
					.price-value {
						font-size: 32rpx;
					}
				}
				
				.original-price {
					font-size: 22rpx;
					color: #999;
					text-decoration: line-through;
					margin-left: 12rpx;
				}
				
				.buy-now {
					width: 140rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background-color: $theme-color;
					color: #fff;
					font-size: 28rpx;
					border-radius: 30rpx;
					box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.3);
				}
			}
		}
	}
	
	.loading-more {
		text-align: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 24rpx;
	}
	
	.loading-state {
		text-align: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 24rpx;
		
		.spinner {
			width: 40rpx;
			height: 40rpx;
			border: 4rpx solid #f3f3f3;
			border-top: 4rpx solid $theme-color;
			border-radius: 50%;
			animation: spin 1s linear infinite;
		}
		
		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
	}
	
	.empty-state {
		text-align: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 24rpx;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			display: block;
			margin-bottom: 20rpx;
		}
		
		button {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: $theme-color;
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.3);
		}
	}
</style>
